<script setup lang="ts">
import './styles/index.css'
import ChannelNav from './components/ChannelNav.vue';
import ArticleList from './components/ArticleList.vue'
import { useCounterStore } from './store'
import { ref } from 'vue'
import { storeToRefs } from 'pinia'

const store = useCounterStore()


const channelId = ref<number>(0)

const changeChannelId = (id: number) => {
  // channelId.value = id
}

const { count, doubleCount } = storeToRefs(store)
</script>

<template>
  <!-- <p>count: {{ count }}</p>
  <p>doubleCount: {{ doubleCount }}</p>
  <button @click="store.increment">count+1</button><br>
  <button @click="store.asyncIncrement">async count+1</button><br> -->
  <!-- <ChannelNav :channelId="channelId" @changeChannelId="changeChannelId" /> -->
  <ChannelNav />
  <!-- <ArticleList :channelId="channelId" /> -->
  <ArticleList />
</template>

<style scoped>

</style>
